import React, { CSSProperties, SFC, useEffect, useRef, useState } from 'react';

interface WarpDriveSetting {
    width?: number /*width*/;
    height?: number /*height*/;
    autoResize?: boolean /*enable/disable autoResize*/;
    autoResizeMinWidth?: number | null /*set autoResize min width*/;
    autoResizeMaxWidth?: number | null /*set autoResize max width*/;
    autoResizeMinHeight?: number | null /*set autoResize min height*/;
    autoResizeMaxHeight?: number | null /*set autoResize max height*/;
    addMouseControls?: boolean /*enable/disable mouse controls*/;
    addTouchControls?: boolean /*enable/disable touch controls*/;
    hideContextMenu?: boolean /*enable/disable canvas context menu*/;
    starCount?: number /*count of active/moving stars*/;
    starBgCount?: number /*count of inactive/background stars*/;
    starBgColor?: { r: number; g: number; b: number } /*background stars color*/;
    starBgColorRangeMin?: number /*background stars color range min of starBgColor*/;
    starBgColorRangeMax?: number /*background stars color range max of starBgColor*/;
    starColor?: { r: number; g: number; b: number } /*stars color*/;
    starColorRangeMin?: number /*stars color range min of starBgColor*/;
    starColorRangeMax?: number /*stars color range max of starBgColor*/;
    starfieldBackgroundColor?: { r: number; g: number; b: number } /*background color*/;
    starDirection?: number /*stars moving in which direction*/;
    starSpeed?: number /*stars moving speed*/;
    starSpeedMax?: number /*stars moving speed max*/;
    starSpeedAnimationDuration?: number /*time in seconds from starSpeed to starSpeedMax*/;
    starFov?: number /*field of view*/;
    starFovMin?: number /*field of view min*/;
    starFovAnimationDuration?: number /*time in seconds from starFov to starFovMin*/;
    starRotationPermission?: boolean /*enable/disable rotation*/;
    starRotationDirection?: number /*rotation direction*/;
    starRotationSpeed?: number /*rotation speed*/;
    starRotationSpeedMax?: number /*rotation speed max*/;
    starRotationAnimationDuration?: number /*time in seconds from starRotationSpeed to starRotationSpeedMax*/;
    starWarpLineLength?: number /*line length*/;
    starWarpTunnelDiameter?: number /*tunnel diameter*/;
    starFollowMouseSensitivity?: number /*mouse follow sensitivity*/;
    starFollowMouseXAxis?: boolean /*enable/disable mouse follow x axis*/;
    starFollowMouseYAxis?: boolean /*enable/disable mouse follow y axis*/;
}

declare class WarpDrive {
    constructor(ele: HTMLElement | null, string: WarpDriveSetting);
}
interface BgProps {
    style?: CSSProperties;
}

const WD: typeof WarpDrive = (window as any).WarpDrive;

const Bg: SFC<BgProps> = (props) => {
    const drive = useRef<WarpDrive | null>(null);
    const [container, setContainer] = useState<HTMLElement | null>(null);
    const containerStyle = { height: '100%', width: '100%' };
    useEffect(() => {
        if (!drive.current && container) {
            const { offsetHeight, offsetWidth } = container;
            drive.current = new WD(container, {
                width: offsetWidth,
                height: offsetHeight,
                addMouseControls: false,
                addTouchControls: false
            });
        }
    }, [container]);
    return (
        <div
            ref={(ref): void => {
                setContainer(ref);
            }}
            style={{ ...containerStyle, ...props.style }}
        >
            {props.children}
        </div>
    );
};
export default Bg;
